<template>
	<div class="work-order-add">
		<el-dialog v-model="state.visible" draggable :close-on-click-modal="false" width="700px">
			<template #header>
				<div style="color: #fff">
					<el-icon size="16" style="margin-right: 3px; display: inline; vertical-align: middle"> <ele-Edit /> </el-icon>
					<span> 工单编辑 </span>
				</div>
			</template>
			<el-card class="mb10">
				<div slot="header" class="clearfix pb10">
			    <span>工单详情</span>
			    <div style="float: right;">工单号：{{state.detail.ticketId}}</div>
			  </div>
			  <el-descriptions class="t-desc" :column="1" border>
    			<el-descriptions-item label="申请人">{{state.detail.applyName}}</el-descriptions-item>
    			<el-descriptions-item label="手机号码">{{state.detail.cellPhone}}</el-descriptions-item>
    			<el-descriptions-item label="区域">{{getLabelByValue(state.orderArea, state.detail.regionId)}}</el-descriptions-item>
    			<el-descriptions-item label="地址">{{state.detail.address}}</el-descriptions-item>
    			<el-descriptions-item label="故障简述">{{state.detail.title}}</el-descriptions-item>
    			<el-descriptions-item label="故障详细描述">{{state.detail.description}}</el-descriptions-item>
    			<el-descriptions-item label="故障类型">{{getLabelByValue(state.faultType, state.detail.problemType)}}</el-descriptions-item>
    		</el-descriptions>
			</el-card>
			<el-card>
				<div slot="header" class="pb10">
			    <span>系统信息</span>
			  </div>
			  <el-descriptions class="t-desc" :column="1" border>
    			<el-descriptions-item label="工单状态">{{getLabelByValue(state.orderState, state.detail.status)}}</el-descriptions-item>
    			<el-descriptions-item label="创建人">{{state.detail.operatorName}}</el-descriptions-item>
    			<el-descriptions-item label="创建时间">{{state.detail.createTime}}</el-descriptions-item>
    			<el-descriptions-item label="修改时间">{{state.detail.updateTime}}</el-descriptions-item>
    			<el-descriptions-item label="分配时间">{{state.detail.distributionTime}}</el-descriptions-item>
    			<el-descriptions-item label="工程师">
    				<template v-if="state.detail.status >= 4">{{getLabelByValue(state.gcsList, state.detail.engineerId, '', 'realName', 'id')}}</template>
    				<el-select v-else v-model="state.form.engineerId">
    					<el-option v-for="item in state.gcsList"
				      :key="item.id"
				      :label="item.realName"
				      :value="item.id"></el-option>
    				</el-select>
    			</el-descriptions-item>
    			<el-descriptions-item label="备注">
    				<template v-if="state.detail.status >= 4">{{state.detail.remarks}}</template>
    				<el-input v-else v-model="state.form.remarks" type="textarea" :autosize="{ minRows: 2}" placeholder="请输入备注"></el-input>
    			</el-descriptions-item>
    		</el-descriptions>
			</el-card>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="cancel">取 消</el-button>
					<el-button v-if="state.detail.status <= 3" type="primary" @click="submit">提 交</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted } from 'vue';
import { ElMessage, ElNotification } from 'element-plus';
import { getEngineer, orderUpdate } from "/@/api/order/index.js";
import {getLabelByValue} from "/@/utils/Tools.js";

const emits = defineEmits(['reload']);
const formRef = ref();
const state = reactive({
	visible: false,
	detail: {},
	form: {
		engineerId: '',
		remarks: '',
	},

	// 区域
	orderArea: [],
	// 故障类型
	faultType: [],
	// 工单状态
	orderState: [],
	// 工程师
	gcsList: [],
});

onMounted(async () => {
	$Dict.get('order_area').then(res => {
		state.orderArea = res;
	})
	$Dict.get('fault_type').then(res => {
		state.faultType = res;
	})
	$Dict.get('order_state').then(res => {
		state.orderState = res;
	})

	getGcs();
});

// 打开弹窗
const open = (detail) => {
	state.detail = detail;
	state.form.engineerId = detail.engineerId;
	state.form.remarks = detail.remarks;

	state.visible = true;
};

// 关闭弹窗
const closeDialog = () => {
	emits('reload');
	state.visible = false;
};

// 取消
const cancel = () => {
	state.visible = false;
};

// 获取工程师
const getGcs = () => {
	getEngineer().then(res => {
		state.gcsList = res.data.result;
	})
}

// 提交
const submit = () => {
	let params = Object.assign(state.detail, state.form);
	params.engineerName = getLabelByValue(state.gcsList, params.engineerId, '', 'realName', 'id');

	orderUpdate(params).then(res => {
		if(res.data.code == 200) {
			ElNotification({
			    title: '提示',
			    message: '编辑成功',
			    type: 'success',
			  })
	    emits('reload');
	    state.visible = false;
		}
	})
};

// 导出对象
defineExpose({ open });
</script>
<style lang="scss" scoped>
.t-desc {
	:deep(.el-descriptions__label) {
		width: 8em;
	}
}
</style>
